<template>
    <n-card :bordered="false" class="proCard">

        <BasicTable :columns="columns" :request="loadDataTable" :row-key="(row: ListDataAboutLabFix) => row.id"
            ref="actionRef" :actionColumn="actionColumn" @update:checked-row-keys="onCheckedRow" :scroll-x="1090">
        </BasicTable>

        <!-- 维修完成填写信息模态框 -->
        <n-modal v-model:show="showModal" :show-icon="false" preset="dialog" title="维修报表">
            <n-card :bordered="false" class="mt-4 proCard">


                <n-form :label-width="90" :model="labBorrowRef" label-placement="left" ref="formRef" class="py-8">

                    <n-form-item label="维修状况" path="remark">
                        <n-input v-model:value="labBorrowRef.reason" type="textarea" placeholder="请输入维修情况" />
                    </n-form-item>

                </n-form>
            </n-card>
            <template #action>
                <n-space>
                    <n-button @click="() => (showModal = false)">取消</n-button>
                    <n-button type="info" :loading="formBtnLoading" @click="confirmForm">结束维修</n-button>
                </n-space>
            </template>
        </n-modal>
    </n-card>
</template>

<script lang="ts" setup>
import { h, reactive, ref } from 'vue';
import { BasicTable, TableAction } from '@/components/Table';
import { BasicForm, FormSchema, useForm } from '@/components/Form/index';

//axios 
import { getTableListAboutLabFix, updateLabFixSate } from '@/api/labAdmin/labAdmin'; //api

import { columnsAboutLabFix, ListDataAboutLabFix } from './columns';

import { PlusOutlined } from '@vicons/antd';
import { useRouter } from 'vue-router';
import { type FormRules, NButton, NInput, useMessage } from 'naive-ui';

//表格的数据项
// const trycol = columnsAboutStudent;columnsAboutTeacher
// var columns = columnsAboutStudent;//columnsAboutTeacher
const columns = ref(columnsAboutLabFix);




const router = useRouter();
// const formRef: any = ref(null);
const actionRef = ref();

const showModal = ref(false);
const formBtnLoading = ref(false);


const actionColumn = reactive({
    width: 100,
    title: '操作',
    key: 'action',
    fixed: 'right',
    render(record: any) {
        return h(TableAction as any, {
            style: 'button',
            actions: [
                {
                    label: '开始维修',
                    onClick: handleFix.bind(null, record),
                    type: 'success',
                    secondary:true,
                    ifShow: () => {
                        return isStartFix(record);
                    },

                },
                {
                    label: '结束维修',
                    onClick: finishFix.bind(null, record),
                    type: 'warning',
                    secondary:true,
                    ifShow: () => {
                        return isFinishFix(record);
                    },

                },

            ],
        });
    },
});
function isFinishFix(record: any) {
    return record.state == 1
}

function isStartFix(record: any) {
    // 逻辑待补充
    return record.state == 0
}


function addTable() {
    showModal.value = true;
}

var pageNum
const loadDataTable = async (res: any) => {
    pageNum = res.page
    return await getTableListAboutLabFix({ ...res, "pageNum": pageNum });
};

function onCheckedRow(rowKeys: any) {
    console.log(rowKeys);
}

function reloadTable() {
    actionRef.value.reload();
}

async function confirmForm(e: { preventDefault: () => void; }) {
    //表单验证
    await updateLabFixSate(params)
    showModal.value = false
    reloadTable();
    // e.preventDefault();
    // formBtnLoading.value = true;
    // formRef.value.validate((errors: any) => {
    //     if (!errors) {
    //         window['$message'].success('维修完成');

    //         await updateLabFixSate(params)
    //         showModal.value = false
            
    //         reloadTable();
    //     } else {
    //         window['$message'].error('请填写完整信息');
    //     }
    //     formBtnLoading.value = false;
    // });
    // reloadTable();
}
//存储发送的参数 非常糟糕的写法
let params = {}

async function handleFix(record: Recordable) {

    params = {
        id: record.id,
        state: 1,
        description: record.description
    }
    await updateLabFixSate(params)

    window['$message'].success('设置成功');

    reloadTable()
}

async function finishFix(record: Recordable) {

    params = {
        id: record.id,
        state: 2,
        description: record.description
    }

    await addTable()


}






const formRef: any = ref(null);
const message = useMessage();


let labBorrowRef = reactive({
    semester: '',

    start_week: '',
    end_week: '',

    section: '',

    lad_id: '',
    lab_name: '',



    reason: '',
    create_time: '',
});

</script>

<style lang="less" scoped></style>